<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqSkuList,reqSaleSku,reqCancelSale,reqSkuInfo,reqRemoveSku} from '@/api/product/sku/index.ts'
import type {SkuResponseData,Sku,SkuInfoData} from '@/api/product/sku/type.ts'
import {ElMessage} from "element-plus";
const pageNo=ref<number>(1)
const pageSize=ref<number>(5)
const total = ref<number>(0)
const skuArr = ref<Sku[]>([])
/**
 * 获取sku
 */
const getSku = async (pager=1) => {
  pageNo.value=pager
  const res:SkuResponseData = await reqSkuList(pageNo.value,pageSize.value)
  skuArr.value=res.data.records
  total.value=res.data.total
}
onMounted(()=>{
  getSku()
})
/**
 * 改变每页几个
 */
const changePageSize = () => {
  getSku()
}
/**
 * 商品上架与下架的操作
 * @param row
 */
const updateSale = async (row:Sku) => {
  if(row.isSale==1){//下架
    await reqCancelSale(row.id as number)
    ElMessage({type:'success', message:'下架成功'})
    await getSku()
  }else {//上架
    await reqSaleSku(row.id as number)
    ElMessage({type:'success', message:'上架成功'})
    await getSku()
  }
}
/**
 * 更新已有的spu
 */
const updateSku = () => {
  ElMessage({type:'warning',message:'工程师正在开发中，敬请期待！！！'})
}
//控制右边的抽屉
const drawer=ref<boolean>(false)
//sku信息
const skuInfo = ref<Sku>({
  category3Id: '',
  spuId: '',
  tmId: '',
  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',
  skuAttrValueList: [{
    attrId:'',
    valueId:'',
    id:'',
    valueName:''
  }],
  skuSaleAttrValueList: [
    {
      saleAttrId:'',
      saleAttrValueId:'',
      id:'',
      saleAttrValueName:''
    }
  ],
  skuImageList:[],
  skuDefaultImg: '',
  isSale: 0,
})
/**
 * 获取sku详细信息
 * @param row
 */
const findSku = async (row:Sku) => {
  const res:SkuInfoData = await reqSkuInfo(row.id as number)
  skuInfo.value=res.data
  drawer.value=true
}
/**
 * 删除一个sku
 * @param row
 */
const deleteOneSku = async (row:Sku) => {
  const res:any = await reqRemoveSku(row.id as number)
  if(res.code==200){
    await getSku(skuArr.value.length>1?pageNo.value:pageNo.value-1)
    ElMessage({type:'success',message:"删除成功！"})
  }else{
    ElMessage({type:'error',message:"删除失败！"})
  }
}
</script>
<template>
  <el-card>
    <el-table border :data="skuArr">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" show-overflow-tooltip width="150px" prop="skuName"></el-table-column>
      <el-table-column label="描述" show-overflow-tooltip width="200px" prop="skuDesc"></el-table-column>
      <el-table-column label="图片"  width="200px">
        <template #default="{row}">
          <el-image :src="row.skuDefaultImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="重量"  width="150px" prop="weight"></el-table-column>
      <el-table-column label="价格"  width="150px" prop="price"></el-table-column>
      <el-table-column label="操作"  fixed="right">
        <template #default="{row}">
          <el-button type="primary" size="small" :icon="row.isSale==1?'Bottom':'Top'" @click="updateSale(row)"></el-button>
          <el-button type="success" size="small" icon="Edit" @click="updateSku"></el-button>
          <el-button type="info" size="small" icon="InfoFilled" @click="findSku(row)"></el-button>
          <el-popconfirm title="您确定要删除吗?" @confirm="deleteOneSku(row)">
            <template #reference>
              <el-button type="danger" size="small" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5,9,13,17]"
        :disabled="false"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        style="margin-top: 15px"
        @current-change="getSku"
        @size-change="changePageSize"
    />
  </el-card>
  <el-drawer
      v-model="drawer"
      title="SKU的详情数据"
  >
    <template #default>
      <el-row  style="margin:8px 0">
        <el-col :span="6">名称：</el-col>
        <el-col :span="18">{{skuInfo.skuName}}</el-col>
      </el-row>
      <el-row style="margin:8px 0">
        <el-col :span="6">描述：</el-col>
        <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
      </el-row>
      <el-row style="margin:8px 0">
        <el-col :span="6">价格：</el-col>
        <el-col :span="18">{{skuInfo.price}}</el-col>
      </el-row>
      <el-row style="margin:8px 0">
        <el-col :span="6">平台属性：</el-col>
        <el-col :span="18"><el-tag style="margin: 0 5px" v-for="skuAttr in skuInfo.skuAttrValueList" :key="skuAttr.id">{{skuAttr.valueName}}</el-tag></el-col>
      </el-row>
      <el-row style="margin:8px 0">
        <el-col :span="6">销售属性：</el-col>
        <el-col :span="18"><el-tag  style="margin: 0 5px" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">{{item.saleAttrValueName}}</el-tag></el-col>
      </el-row>
      <el-row style="margin:8px 0">
        <el-col :span="6">商品图片：</el-col>
        <el-col :span="18">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
              <el-image :src="item.imgUrl" style="width: 100%;height: 100%;"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>